<template>
	<view class="page">
		<view class="title">
			4.3.Prop校验与prop默认值用法及循环遍历数组对象
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/components/props.html" text="Props" color="#007BFF"></uni-link>
		</view>
		<view class="p">
			一般情况下传对象的情况会比较多，这才是正常的使用场景。
		</view>
		<view class="p">
			<ProList v-for="(item,index) in posts" :key="item.id" :post="item"></ProList>
			<ProList></ProList>
		</view>
		<view class="p">
			默认数据为空的时候没法显示默认的数据
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const posts = ref([{
		id: "865",
		title: "7B2软件下载解决方案",
		des: "项目需求 之前B2的群友与我分享了他的一个项目需求， 他希望能对现有的网站进行一次全面的升级和优化。 这个网站的核心功能是为VIP会员提供高品质的下载服务 ",
		img: "https://ourule.com/wp-content/uploads/2024/05/2.png"
	}, {
		id: "841",
		title: "7b2视频网站解决方案",
		des: " 项目起点 最近在使用7b2的过程中发现B2的强大不是一点点，但是功能太多导致系统臃肿用起来比较麻烦。很多小白和新手刚开始接触wordpress然后选择了7B2，想清楚自己的目标以后发现很多东西会使用，或者不知道从哪关闭。",
		img: "https://ourule.com/wp-content/uploads/2024/02/vouurle.png"
	}, {
		id: "829",
		title: "7B2文章模块样式优化终极版",
		des: "前言 其实一直蛮喜欢好看的设计，就像艺术品一样让人着迷，像身材优雅又波涛汹涌的女人一样让人动心。",
		img: "https://ourule.com/wp-content/uploads/2024/01/post1.png"
	}])
</script>

<style lang="scss" scoped>
	.p .box {
		margin-bottom: 24rpx;
	}
</style>